@import "./theme.less";

html,
body {
  width   : 100%;
  height  : 100%;
  overflow: hidden;
}

#app {
  width : 100%;
  height: 100%;
}

a {
  color      : @primary-color;
  line-height: 1.2;

  &:hover {
    color                  : @primary-color;
    text-decoration        : underline;
    text-underline-position: under;
  }
}

.hoverable {
  cursor: pointer;

  &:hover {
    background-color: tint(@background, 20%);
  }

  &:active {
    background-color: shade(@background, 5%);
  }
}

@0px: 0px;

.loopMarginPadding(@list, @i: 1, @val: extract(@list, @i)) when (length(@list)>=@i) {

  .margin {
    &-@{val} {
      margin: @val + @0px;
    }

    &-top-@{val} {
      margin-top: @val + @0px;
    }

    &-left-@{val} {
      margin-left: @val + @0px;
    }

    &-right-@{val} {
      margin-right: @val + @0px;
    }

    &-bottom-@{val} {
      margin-bottom: @val + @0px;
    }
  }

  .padding {
    &-@{val} {
      padding: @val + @0px;
    }

    &-top-@{val} {
      padding-top: @val + @0px;
    }

    &-left-@{val} {
      padding-left: @val + @0px;
    }

    &-right-@{val} {
      padding-right: @val + @0px;
    }

    &-bottom-@{val} {
      padding-bottom: @val + @0px;
    }
  }

  .loopMarginPadding(@list, (@i+1));
}

@margin_padding_array: 8, 10, 16, 20, 100;
.loopMarginPadding(@margin_padding_array);

.loopWidthHeight(@list, @i: 1, @val: extract(@list, @i)) when (length(@list)>=@i) {

  .width {
    &-@{val} {
      width: @val + @0px  !important;
    }
  }

  .height {
    &-@{val} {
      height: @val + 0% !important;
    }
  }

  .loopWidthHeight(@list, (@i+1));
}

.width-100 {
  width: 100%;
}

.height-100 {
  height: 100%;
}

@width_height_array: 140, 200, 250, 300;
.loopWidthHeight(@width_height_array);

.color(@color) {
  &-cell {

    td {
      background-color: @color  !important;
    }
  }

  &-text {

    td {
      color: @color  !important;
    }
  }
}

.success {
  .color(@success-table-color);
}

.warning {
  .color(@warning-table-color);
}

.error {
  .color(@error-table-color);
}